<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>详情</span>
    </div>

    <el-form ref="form" :model="form" label-width="80px" inline>
      <el-form-item label="编码">
        <el-input v-model="form.code" readonly></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="form.name" readonly></el-input>
      </el-form-item>
      <el-form-item label="前端路由">
        <el-input v-model="form.navRouteName" readonly></el-input>
      </el-form-item>
      <el-form-item label="顺序">
        <el-input v-model="form.navSortNo" readonly></el-input>
      </el-form-item>
    </el-form>

    <OperateResource :parentCode="currentCode"></OperateResource>
  </el-card>
</template>
<script>
import { mapActions } from 'vuex'
import OperateResource from '@/views/system/resource/operate/OperateResource'
export default {
  name: 'ViewResource',
  components: { OperateResource },
  props: {
    code: {
      type: String
    }
  },
  data() {
    return {
      form: {},
      currentCode: ''
    }
  },
  methods: {
    ...mapActions(['GetResourceById']),
    search() {
      this.GetResourceById(this.currentCode).then(res => {
        if (res) {
          this.form = res
        }
      }).catch(() => {
      })
    }
  },
  watch: {
    code (newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.currentCode = newVal
        this.search()
      }
    }
  }
}
</script>
